// ------login page
import { Component, Vue } from 'vue-property-decorator';
import DemandAdd from './demand-add/demand-add.vue';
import request, { Api } from '@/request';

interface FormVueDesign extends Vue {
  form: any;
}

@Component({
  components: { DemandAdd }
})
export default class DemandList extends Vue {
  // 表格操作栏按钮大小
  private size = 'small';

  // 表格配置
  private columns = [
    {
      dataIndex: 'demandName',
      key: 'demandName',
      align: 'center',
      slots: { title: 'demandName' }
    },
    {
      title: '需求链接',
      dataIndex: 'demandLink',
      key: 'demandLink',
      align: 'center'
    },
    {
      title: '操作',
      key: 'operation',
      scopedSlots: { customRender: 'operation' },
      align: 'center'
    }
  ];

  // 表格数据
  private data = [];

  // 弹出框状态
  private visible = false;
  private confirmLoading = false;

  // 查询需求列表
  private async searchDemand() {
    try {
      const res = await request.post(Api.searchDemandList, {});
      if (res.data.success) {
        res.data.data.forEach((item: any, dataIndex: number) => {
          item.key = dataIndex;
        });
        this.data = res.data.data;
      } else {
      }
    } catch (e) {
      console.error(e);
    }
  }

  // 打开弹出框
  private openAddModal() {
    console.log('点击了modal');
    this.visible = true;
  }

  // 新增需求确定按钮
  private handleOk(e: { preventDefault: () => void }) {
    const modalForm = <FormVueDesign> this.$refs.demandAddForm;
    console.log('点击了确定提交按钮', modalForm);

    const form = modalForm.form;

    this.confirmLoading = true;
    form.validateFields(async (err: any, values: any) => {
      if (err) {
        return;
      }
      console.log('接收到的表单值: ', values);
      try {
        const res = await request.post(Api.insertDemand, values);
        console.log(res);
        if (res.data.success) {
          form.resetFields();
          this.visible = false;
          this.confirmLoading = false;
        } else {
        }
      } catch (e) {}
    });
  }

  // 取消弹出框操作
  private handleCancel() {
    console.log('Clicked cancel button');
    this.visible = false;
  }

  // 跳转需求接口列表页面
  private toDemandInterfaceListPage(id: any) {
    console.log(id);
    this.$router.push({
      name: 'demand-interface-detail',
      params: { id }
    });
  }

  private created() {
    console.log('页面初始化了...');

    // 初始化查询需求列表
    this.searchDemand();

    // 面包屑
    this.$store.commit({
      type: 'changeBreadcrumb',
      breadcrumb: [
        {
          path: '/home/demand',
          breadcrumbName: '需求列表'
        }
      ]
    });

    console.log('>>>面包屑', this.$store.state.breadcrumb);
  }
}
